import React, { Component } from 'react';
import { View, Text, StatusBar, ImageBackground, TouchableOpacity, Image } from 'react-native';
import request from "../../../utils/request";
import { FRIENDS_SEARCH, BASE_URI } from "../../../utils/pathMap";
import { pxToDp, screenHeight, screenWidth } from "../../../utils/stylesKits";
import IconFont from "../../../components/IconFont";
import { Overlay } from "teaset";
import FilterPanel from "./components/FilterPanel";

class Index extends Component {
    params = {
        gender: '女',
        distance: 10000
    }
    state = {
        list: [
            // { uid: 7, header: '', nick_name: '一叶知秋', dist: 0 }
        ]
    }

    componentDidMount() {
        this.getList();
    }

    WHMap = {
        "wh1": { width: pxToDp(70), height: pxToDp(100) },
        "wh2": { width: pxToDp(60), height: pxToDp(90) },
        "wh3": { width: pxToDp(50), height: pxToDp(80) },
        "wh4": { width: pxToDp(40), height: pxToDp(70) },
        "wh5": { width: pxToDp(30), height: pxToDp(60) },
        "wh6": { width: pxToDp(20), height: pxToDp(50) },
    }
    // 根据 dist来返回对应的宽度的档次
    getWidthHeight = (dist) => {
        if (dist < 200) {
            return 'wh1';
        }
        if (dist < 400) {
            return 'wh2';
        }
        if (dist < 600) {
            return 'wh3';
        }
        if (dist < 1000) {
            return 'wh4';
        }
        if (dist < 1500) {
            return 'wh5';
        }
        return 'wh6';
    }

    // 获取附近的数据
    getList = async () => {
        const res = await request.privateGet(FRIENDS_SEARCH, this.params);
        console.log(res);
        this.setState({ list: res.data });
    }

    // 点击筛选按钮
    handleFilterShow = () => {
        let overlayViewRef = null;
        let overlayView = (
            <Overlay.View
                modal={true}
                overlayOpacity={0.3}
                ref={v => overlayViewRef = v}
            >
                {/* 显示筛选组件 */}
                <FilterPanel onSubmitFilter={this.handleSubmitFilter} params={this.params} onClose={() => overlayViewRef.close()} />
            </Overlay.View>
        );
        Overlay.show(overlayView);
    }

    // 获取了筛选结果
    handleSubmitFilter = (filterParams) => {
        // console.log(filterParams);
        this.params = filterParams;
        this.getList();
    }

    render() {
        const { list } = this.state;
        return (
            <ImageBackground
                style={{ flex: 1, position: 'relative' }}
                // resizeMode='stretch'
                source={require('../../../res/search.gif')}>
                <StatusBar backgroundColor={'transparent'} translucent={true} />

                {/* 筛选按钮 */}
                <TouchableOpacity
                    style={{ backgroundColor: '#fff', position: 'absolute', right: '8%', top: '8%', width: pxToDp(40), height: pxToDp(40), borderRadius: pxToDp(20), alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}
                    onPress={this.handleFilterShow}
                >
                    <IconFont style={{ color: '#912375', fontSize: pxToDp(16) }} name='iconshaixuan' />
                </TouchableOpacity>

                {
                    list.map((v, i) => {
                        const whMap = this.WHMap[this.getWidthHeight(v.dist)];
                        const tx = Math.random() * (screenWidth - whMap.width);
                        const ty = Math.random() * (screenHeight - whMap.height);
                        return <TouchableOpacity
                            key={i}
                            style={{ position: 'absolute', left: tx, top: ty }}
                        >
                            <ImageBackground
                                resizeMode='stretch'
                                source={require('../../../res/showfirend.png')}
                                style={{ ...whMap, position: 'relative', alignItems: 'center' }}
                            >
                                <Text
                                    numberOfLines={1}
                                    style={{ color: '#ffffff9a', position: 'absolute', top: -pxToDp(20) }}>{v.nick_name}</Text>
                                <Image style={{ width: whMap.width, height: whMap.width, borderRadius: whMap.width / 2 }} source={{ uri: BASE_URI + v.header }} />
                            </ImageBackground>
                        </TouchableOpacity>
                    })
                }

                <View style={{ position: 'absolute', bottom: pxToDp(50), width: '100%', alignItems: 'center' }}>
                    <Text style={{ color: '#fff', fontSize: pxToDp(16) }}>您附近有<Text style={{ color: 'red', fontSize: pxToDp(20) }}>{list.length}</Text>个好友</Text>
                    <Text style={{ color: '#fff', fontSize: pxToDp(16) }}>选择聊聊</Text>
                </View>
            </ImageBackground>
        );
    }
}

export default Index;